<template>
  <div class="search">
    <!-- 头部搜索框 -->
    <header>
      <van-search
        v-model="searchValue"
        show-action
        placeholder="请输入商家或美食名称"
        @search="onSearch"
        @input="clearContent"
      >
        <template #action>
          <div @click.prevent="onSearch">提交</div>
        </template>
      </van-search>
    </header>
    <!-- 点击提交加载数据 -->
    <section v-if="restaurantList.length">
      <div class="showTitle">商家</div>
      <van-swipe-cell class="content">
        <div v-for="item in restaurantList" :key="item.id" @click="goDetail('/home/shopInfo',item.id)">
          <van-card
            :num="2"
            :desc="`月售${item.recent_order_num}单`"
            :title="item.name"
            class="goods-card"
          >
            <template #price class="price">
              配送费{{ item.float_minimum_order_amount }}元起
            </template>
            <template #thumb>
              <img  v-lazy="`https://elm.cangdu.org/img/${item.image_path}`" alt="" class="imge">
            </template>
            <template #num> 距离{{ item.order_lead_time }}</template>
          </van-card>
        </div>
      </van-swipe-cell>
    </section>
    <!-- 历史搜索记录 -->
    <section v-if="searchHistory.length && showHistory">
      <div class="showTitle">搜索历史</div>
      <div v-for="(itt, index) in searchHistory" :key="index" class="content2">
        <van-cell-group>
          <van-cell :title="itt" @click.stop="enter(index)">
            <span @click.stop="delLocalstorage(index)"><van-icon name="cross"/></span>
          </van-cell>
        </van-cell-group>
      </div>
      <van-cell-group>
          <van-cell title="清空历史记录" class="content3" @click="clearAll">
          </van-cell>
        </van-cell-group>
    </section>
    <section v-if="!showHistory && restaurantList.length === 0">
      <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无数据"/>
    </section>
  </div>
</template>
<script>
export default {
  data () {
    return {
      searchValue: '', // 搜索内容
      restaurantList: [], // 搜索返回数据
      searchHistory: [], // 历史搜索记录
      showHistory: true, // 是否显示历史记录，只有在返回搜索结果后隐藏
      emptyResult: false // 搜索结果为空时显示
    }
  },
  created () {
  },
  mounted () {
    if (localStorage.getItem('searchHistory')) {
      this.searchHistory = JSON.parse(localStorage.getItem('searchHistory'))
      console.log(this.searchHistory)
    }
  },
  methods: {
    async onSearch () {
      if (this.searchValue && this.searchHistory.indexOf(this.searchValue) === -1) {
        const ras = this.searchValue.split(',')
        this.searchHistory = this.searchHistory.concat(ras)
        console.log(this.searchHistory)
        localStorage.setItem('searchHistory', JSON.stringify(this.searchHistory))
      } else if (!this.searchValue) {
        return
      }
      // 点击后需要隐藏历史记录
      this.showHistory = false
      // 获取搜索数据
      const res = await this.$http.searchRestaurant(this.searchValue)
      this.restaurantList = res.data
    },
    // 点击一条条删除历史记录
    delLocalstorage (index) {
      this.searchHistory.splice(index, 1)
      localStorage.setItem('searchHistory', JSON.stringify(this.searchHistory))
    },
    // 当搜索框内容清空时,显示历史记录,隐藏搜索结果
    clearContent () {
      if (this.searchValue === '') {
        this.showHistory = true // 显示历史记录
        this.restaurantList = [] // 清空搜索结果
        this.emptyResult = false // 隐藏搜索为空提示
      }
    },
    enter (index) {
      const x = index + 1
      const chose = this.searchHistory.slice(index, x)
      this.searchValue = chose.toString()
      console.log(this.searchValue)
      this.onSearch()
    },
    clearAll () {
      localStorage.removeItem('searchHistory')
      this.searchHistory = []
      this.showHistory = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .search {
    .van-cell {
      line-height: 60px;
      border-radius: 5px;
      font-size: 24px;
      color: #333333;
    }

    .van-field {
      padding: 0 10px 0 20px;
    }

    .van-search__action {
      line-height: 60px;
      background-color: #3190e8;
      color: white;
      border-radius: 5px;
      margin: 0 10px 0 10px;
      font-size: 24px;
      font-weight: 500;
      width: 80px;
      text-align: center;
    }

    .showTitle {
      font-size: 22px;
      line-height: 80px;
      text-indent: 20px;
      font-weight: bold;
      color: #666;
    }

    .goods-card {
      margin: 0;
      background-color: white;
    }

    .delete-button {
      height: 100%;
    }

    .van-card__title {
      max-height: 24px;
      font-weight: 500;
      line-height: 28px;
      font-size: 24px;
    }

    .van-card__desc {
      max-height: 28px;
      color: #e76a30;
      line-height: 26px;
      margin-top: 4px;
    }

    .van-card__content {
      padding-left: 10px;
    }

    .van-card {
      margin: 0 5px 15px 5px;
      border-radius: 10px;
    }

    .van-card__price {
      display: inline-block;
      color: #464649;
      font-weight: 500;
      font-size: 12px;
    }

    .content {
      padding-bottom: 65px;
      background-color: #f5f5f5;
    }
    .content2 {
      border-bottom:#e9e8e8 1px solid;
    }
    .content3 {
      text-align: center;
      color: rgb(36, 142, 230);
      font-weight: 700;
      font-size: 26px;
    }
    .imge{
      width: 80px;
      height: 80px;
    }
    /deep/.custom-image .van-empty__image {
      margin-top: 140px;
      width: 130px;
      height: 150px;
    }
    /deep/.van-empty__description{
      font-size: 34px;
      margin-top: 40px;
    }
  }
</style>
